<template>
	<div class='customization-demo'>
		<div class="background">
			<div class="background-content">
				<div class="name">陪伴模块定制</div>
				<div
					class="desc"
					v-html="'有趣的玩具舞台模块\n拥有播放、对话、对战、问答模式\n一起来让玩具互动起来吧～'"
				/>
			</div>
			<img	src="https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/2022050312050055-Mask group.png">
		</div>
		<div
			class="container"
		>
			<div class="step">
				<Step
					index="1"
					:length="modes[selectedMode].maxLength"
					:title="roleMap.step2Title"
				>
					<div class="modes">
						<div
							class="modes-item"
							v-for="(item,i) in modes"
							:key="item.label"
						>
							<div class="label">
								<Iconfont
									v-if="i === selectedMode"
									name="icon-a-Vector2"
									color="#00C9A9"
									size="20"
								/>
								{{item.label}}
							</div>
							<Button
								width="190"
								height="190"
								bgColor="#EFF3F3"
								:border="i === selectedMode ? '3px solid #00C9A9' : 'none'"
								@click="selectedMode=i"
							>
								<img :src="item.img">
							</Button>
						</div>
					</div>
				</Step>
			</div>
			<div
				v-if="selectedMode===0"
				class="step"
			>
				<Step
					index="2"
					:length="modes[selectedMode].maxLength"
					:title="roleMap.step2Title"
				>
					<div class="contents">
						<div
							class="contents-item"
							v-for="(item,i) in functions"
							:key="item.label"
						>
							<div class="label">
								<Iconfont
									v-if="i === selectedFun"
									name="icon-a-Vector2"
									color="#00C9A9"
									size="20"
								/>
								{{item.label}}
							</div>
							<Button
								width="190"
								height="190"
								bgColor="#EFF3F3"
								:border="i === selectedFun ? '2px solid #00C9A9' : 'none'"
								@click="selectedFun=i;selectedMusicType=[]"
							>
								<img :src="item.img">
								<input
									class="select-file"
									v-if="item.selectFile"
									type="file"
								>
							</Button>
						</div>
					</div>
					<div
						v-if="musicTypes[functions[selectedFun].value]"
						class="music-types"
					>
						<Button
							class="music-types-item"
							v-for="(item,i) in musicTypes[functions[selectedFun].value]"
							:key="item"
							width="170"
							height="54"
							bgColor="#ffffff"
							color="rgba(0, 73, 62, 0.4)"
							fontSize="20"
							:border="selectedMusicType.indexOf(i)>-1 ? '2px solid #00C9A9' : '2px solid #DEEAE8'"
							@click="onclickMusicType(i)"
						>
							{{item}}
						</Button>
					</div>
				</Step>
			</div>
			<div
				v-if="selectedMode===0"
				class="step"
			>
				<Step
					index="3"
					:length="modes[selectedMode].maxLength"
					:title="roleMap.stepPlayTitle"
				>
					<div class="desc">将会生成 1 个标签，将标签贴在玩具上，玩具就变“小博士”可以上台表演啦~</div>
					<div class="picker-input">
						<div class="picker">
							<el-select v-model="picker1">
								<el-option
									v-for="item in pickers1"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</div>
						<div class="value">
							<span class="large">=</span>
							<span class="large">5</span>
							<span class="small">个"演员"</span>
						</div>
					</div>
				</Step>
			</div>
			<div
				v-if="selectedMode===1"
				class="step"
			>
				<Step
					index="2"
					:length="modes[selectedMode].maxLength"
					title="想让几个玩具变成“小精灵”？"
				>
					<div class="desc">将会生成 1 个标签，将标签贴在玩具上，玩具就变“小精灵”可以上台表演啦~</div>
					<div class="picker-input">
						<div class="picker">
							<el-select v-model="picker2">
								<el-option
									v-for="item in pickers2"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</div>
						<div class="value">
							<span class="large">=</span>
							<span class="large">3</span>
							<span class="small">个”小精灵”</span>
						</div>
					</div>
				</Step>
			</div>
			<div
				v-if="selectedMode===2"
				class="step"
			>
				<Step
					index="2"
					:length="modes[selectedMode].maxLength"
					title="想让几个玩具变成“战士”？"
				>
					<div class="desc">将会生成 1 个标签，将标签贴在玩具上，玩具就变“战士”可以上台表演啦~</div>
					<div class="picker-input">
						<div class="picker">
							<el-select v-model="picker2">
								<el-option
									v-for="item in pickers2"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</div>
						<div class="value">
							<span class="large">=</span>
							<span class="large">12</span>
							<span class="small">个”战士”</span>
						</div>
					</div>
				</Step>
			</div>
			<div
				v-if="selectedMode===3"
				class="step"
			>
				<Step
					index="2"
					:length="modes[selectedMode].maxLength"
					title="可以科普什么内容？"
				>
					<div class="sciences">
						<Button
							class="sciences-item"
							v-for="(item,i) in sciences"
							:key="item"
							width="170"
							height="54"
							bgColor="#ffffff"
							color="rgba(0, 73, 62, 0.4)"
							fontSize="20"
							:border="selectScience.indexOf(i)>-1 ? '2px solid #00C9A9' : '2px solid #DEEAE8'"
							@click="onclickScience(i)"
						>
							{{item}}
						</Button>
					</div>
				</Step>
			</div>
			<div
				v-if="selectedMode===3"
				class="step"
			>
				<Step
					index="3"
					:length="modes[selectedMode].maxLength"
					title="想让几个玩具变成“小博士”？"
				>
					<div class="desc">将会生成 1 个标签，将标签贴在玩具上，玩具就变“小博士”可以上台表演啦~</div>
					<div class="picker-input">
						<div class="picker">
							<el-select v-model="picker2">
								<el-option
									v-for="item in pickers2"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</div>
						<div class="value">
							<span class="large">=</span>
							<span class="large">12</span>
							<span class="small">个”小博士”</span>
						</div>
					</div>
				</Step>
			</div>
			<div class="step">
				<Step
					:index="modes[selectedMode].maxLength"
					:length="modes[selectedMode].maxLength"
					title="确定定制"
				>
					<Button
						width="180"
						height="54"
						fontSize="20"
						@click="setHintModel"
					>
						{{roleMap.step4BtnText}}
						<Iconfont
							name="icon-arrow-right"
							color="#ffffff"
							size="20"
						/>
					</Button>
				</Step>
			</div>
		</div>
		<HintModel v-if="showHint" />
	</div>
</template>

<script>
import HintModel from './components/HintModel'
export default {
  components: {
    HintModel
  },
  props: {
    role: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      showHint: false,
      modes: [
        { label: '播放模式', value: 'play', maxLength: 4, img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/customization-demo/20220311201051463-image 18.png' },
        { label: '对话模式', value: 'dialogue', maxLength: 3, img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/customization-demo/20220311192005902-image 13.png' },
        { label: '对战模式', value: 'fight', maxLength: 3, img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/customization-demo/20220311201051463-image 19.png' },
        { label: '百科模式', value: 'encyclopedia', maxLength: 4, img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/customization-demo/20220311201051463-image 17.png' }
      ],
      selectedMode: 0,
      functions: [
        { label: '讲故事', value: 'story', img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/customization-demo/20220311192005902-Icon-10.png' },
        { label: '唱歌', value: 'sing', img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/customization-demo/20220311192005902-Icon-11.png' },
        { label: '自定义', value: 'custom', selectFile: true, img: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/customization-demo/20220311192005902-image 14.png' },
      ],
      selectedFun: 0,
      musicTypes: {
        story: ['伊索寓言', '格林童话', '安徒生童话', '国外儿童名著'],
        sing: ['儿童音乐', '纯音乐', '古典音乐', '民谣音乐', '流行音乐', '爵士音乐', '摇滚音乐', '自定义+'],
      },
      selectedMusicType: [0],
      sciences: ['动物世界', '植物天地', '浩瀚宇宙', '广阔地理', '微生物世界', '奇骏山川', '大河汪洋', '极地世界'],
      selectScience: [0],
      pickers1: [
        { label: '每项内容1个标签', value: 1 },
        { label: '每项内容2个标签', value: 2 },
        { label: '每项内容3个标签', value: 3 },
        { label: '每项内容4个标签', value: 4 },
        { label: '每项内容5个标签', value: 5 },
      ],
      picker1: 1,
      pickers2: [
        { label: '1个标签', value: 1 },
        { label: '2个标签', value: 2 },
        { label: '3个标签', value: 3 },
        { label: '4个标签', value: 4 },
        { label: '6个标签', value: 6 },
        { label: '7个标签', value: 7 },
        { label: '8个标签', value: 8 },
      ],
      picker2: 1
    }
  },
  computed: {

    roleMap() {
      if (this.role === 'younger') {
        return {
          step1Title: '它的模式',
          step2Title: '可以播放什么内容？',
          stepPlayTitle: '设置标签数量',
          step4BtnText: '去提交',
        }
      } else {
        return {
          step1Title: '设置模式',
          step2Title: '设置播放内容',
          stepPlayTitle: '想让几个玩具变成“演员”？',
          step4BtnText: '去下单',
        }
      }
    }
  },
  methods: {
    setHintModel() {
      this.showHint = true
      setTimeout(() => {
        this.showHint = false
      }, 2000)
    },
    onclickMusicType(i) {
      const index = this.selectedMusicType.indexOf(i)

      if (index > -1) {
        this.selectedMusicType.splice(index, 1)
      } else {
        this.selectedMusicType.push(i)
      }
    },
    onclickScience(i) {
      const index = this.selectScience.indexOf(i)

      if (index > -1) {
        this.selectScience.splice(index, 1)
      } else {
        this.selectScience.push(i)
      }
    },
  }
}
</script>

<style lang='scss' scoped>
.customization-demo {
  padding-top: 78px;
  background-color: #eff3f3;

  .background {
    &-content {
      position: absolute;
      top: 80px;
      left: 110px;
      z-index: 10;
      white-space: pre-line;

      .name {
        font-size: 54px;
        color: #ffffff;
        text-shadow: 2px 3px  #69c8c2;
      }

      .desc {
        margin-top: 20px;
        font-size: 20px;
        line-height: 26px;
        color: #ffffff;
      }
    }

    img {
      width: 100%;
    }
  }

  .container {
    padding: 35px 60px;
    margin-top: -30px;
    background-color: #ffffff;
    border-radius: 22px 22px 0 0;

    .step {
      padding-bottom: 30px;
      margin-bottom: 10px;

      .desc {
        color: $color3;
      }
    }

    .picker-input {
      display: flex;
      align-items: center;
      margin-top: 42px;
      color: $color3;

      .picker {
        margin-right: 34px;

        ::v-deep .el-input {
          input {
            height: 68px;
            padding-left: 36px;
            font-size: 26px;
            color: $primary2;
            background: #fbfbfb;
            border: 3px solid #deeae8;
            border-radius: 8px;
          }

          .el-input__suffix {
            right: 20px;
          }

          .el-input__icon {
            font-size: 28px;
            line-height: 68px;
          }
        }
      }

      span:nth-child(2) {
        margin: 0 17px 0 22px;
      }

      .value {
        span {
          vertical-align: middle;
        }

        .large {
          font-size: 36px;
        }

        .small {
          font-size: 20px;
        }
      }
    }

    .modes,
    .contents {
      display: flex;
      text-align: center;

      &-item {
        position: relative;
        margin-right: 20px;

        .select-file {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          cursor: pointer;
          opacity: 0;
        }

        .label {
          margin-bottom: 10px;
        }
      }
    }

    .music-types {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 24px;
      padding: 42px;
      margin-top: 30px;
      background-color: $bgColor2;
      border-radius: $rLarge;
    }

    .sciences {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 24px;
      padding: 22px 0;
    }
  }
}
</style>
